<template>
	<div class="ai-process-peech-wrappwer">
		<el-form-item label="智能问答" class="switch">
			<el-switch :value="reply.isOn" :disabled="nluError" @change="updateActive"> </el-switch>
			<div class="nlu-error-text" v-show="nluError">NLU服务异常，暂无法开启智能问答！</div>
		</el-form-item>
		<div class="question-box" v-if="reply.isOn">
			<el-form-item label="智能问答设置" prop="aiProcessSpeech" :rules="aiProcessSpeechRules">
				<div class="question-contents" :class="reply.data.length === 0 ? 'question-contents-error' : ''">
					<p class="setting" style="right: 0px">
						<span><i>*</i>反问意图点</span>
						<el-button @click="onSettingQuestion">设置</el-button>
					</p>
					<div class="icon">
						<span class="err"> <i>*</i>AI回复反问后，主流程提示话术 </span>
						<span class="imgQuestion">
							<img :src="questionIcon" alt="" />
							<i class="tips">AI回答访客的反问后，可能需要提示访客恢复主流程提问</i>
						</span>
					</div>
					<!-- <el-input :value="reply.mainProcessSpeech" :id="'aiProcessSpeech'" :disabled="showDetail" placeholder="请输入主流程提示话术" @input="updateValue"> </el-input> -->
					<div class="input-wrapper">
						<ZcoInput :value="reply.mainProcessSpeech" :id="'aiProcessSpeech'" :disabled="showDetail" placeholder="请输入主流程提示话术" @input="updateValue"> </ZcoInput>
					</div>
				<el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable" v-if="!showDetail"></el-button>
				</div>
			</el-form-item>
		</div>
	</div>
</template>

<script>
import ZcoInput from '../components/TinymceInput.vue';
import questionImg from '@/assets/img/aiworkflowimage/question.png';
export default {
	components: {
		ZcoInput,
	},
	props: {
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		prop: {
			type: String,
			default: () => ''
		},
		intelligentReply: {
			type: Object,
			default: () => {},
			required: true
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		nluError: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			reply: {
				data: [],
				isOn: false,
				mainProcessSpeech: null
			},
			questionIcon: questionImg,
			aiProcessSpeechRules: [
				// 定义自定义校验规则对象
				{
					validator: (rule, value, callback) => {
						console.log('value', value, rule, this.reply.data);
						if (this.reply.data.length === 0) {
							callback(new Error('请设置反问意图点'));
						} else {
							callback();
						}
					},
					trigger: ['blur', 'change']
				},
				{
					required: true,
					message: '请输入主流程提示话术',
					trigger: ['blur']
				},
				{
					min: 1,
					max: 200,
					message: '长度在 1 到 200 个字符',
					trigger: ['blur']
				}
			]
		};
	},
	watch: {
		intelligentReply: {
			handler(newValue) {
				this.reply = newValue;
			}
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.reply = { ...this.reply, ...this.intelligentReply };
			console.log(this.intelligentReply);
		});
	},
	methods: {
		updateValue(e) {
			console.log(e);
			this.reply.mainProcessSpeech = e;
			console.log(this.intelligentReply, this.value);
			this.$emit('input', this.prop, { ...this.reply });
		},
		updateActive(e) {
			if (!e) {
				this.stopConfirm();
			} else {
				this.reply.isOn = e;
				this.$emit('input', this.prop, { ...this.reply });
			}
		},
		onAddVariable() {
			this.$emit('onAddVariable', this.prop);
		},
		onSettingQuestion() {
			this.$emit('onSettingQuestion');
		},
		stopConfirm() {
			this.$confirm('停用智能问答，您当前设置的内容将不被保存，是否停用?', '温馨提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				left: true
			})
				.then(() => {
					this.$message({
						type: 'success',
						message: '停用成功!'
					});
					this.reply = {
						data: [],
						isOn: false,
						mainProcessSpeech: null
					};
					this.$emit('input', this.prop, this.reply);
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消停用'
					});
				});
		}
	}
};
</script>

<style lang="less" scoped>
.ai-process-peech-wrappwer {
	.switch {
		display: flex;
		align-items: center;
	}
	.nlu-error-text {
		color: #f56c6c;
		font-size: 13px;
		height: 20px;
		margin-top: -10px;
		margin-left: 10px;
	}

	.question-box {
		padding-right: 20px;
    	box-sizing: border-box;
	}
	.question-box .question-contents {
		width: 100%;
		background: #ffffff;
		border: 1px solid #d8e0fd;
		box-shadow: 0px 0px 7px 1px rgba(99, 132, 254, 0.66);
		border-radius: 6px;
		padding-bottom: 20px;

		p {
			position: relative;
			border-bottom: 1px solid #f6f6f8;
			width: 90%;
			display: flex;
			justify-content: space-between;
			padding: 10px;
			.el-button {
				background-color: #fff;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
			i {
				color: #f56c6c;
				padding-right: 4px;
			}
		}
		.icon {
			position: relative;
			padding: 0 10px;
			.tips {
				display: none;
			}
			i {
				color: #f56c6c;
				padding-right: 4px;
			}
		}
		.imgQuestion:hover .tips {
			padding: 0 20px;
			position: absolute;
			top: 30%;
			left: 24.5%;
			line-height: 28px;
			color: #4e5254;
			background-color: #e8e8e8;
			box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
			border-radius: 4px;
			font-size: 12px;
			display: inline-block;
		}
		.imgQuestion {
			cursor: pointer;
			img {
				width: 12px;
				height: 12px;
			}
		}
		.el-input {
			padding: 0 10px;
			width: calc(100% - 60px);
		}
		.err {
			position: relative;
		}
	}
	.question-contents-error {
		box-shadow: 0px 0px 7px 1px rgba(255, 58, 67, 0.788) !important;
	}

	.question-images {
		position: absolute;
		right: 0;
		top: 0;
		display: flex;
		flex-flow: column;
		align-items: center;
		p {
		}
		span {
			cursor: pointer;
			height: 12px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #b8b8b8;
			margin-top: -15px;
		}
		.blueactive {
			height: 12px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6384fe;
		}
		img {
			width: 14px;
			vertical-align: middle;
		}
	}
	.input-wrapper {
		display: inline-block;
		width: 90%;
		margin-left: 20px;
		margin-right: -48px;
	}
}
</style>

<style lang="less">
.ai-process-peech-wrappwer {
	.el-form-item__content {
		margin-left: 0 !important;
	}
}
</style>
